<template>
  <div class="mdui-container">
    <br />
    <h2>{{ modeText[mode] }}</h2>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">文章标题</label>
      <input
        class="mdui-textfield-input"
        type="text"
        v-model="article_data.title"
        :readonly="isReadonly"
      />
    </div>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">文章封面</label>
      <br />
      <img
        :src="image_url"
        width="100px"
        height="100px"
        onclick="document.getElementById('imgup').click()"
      />
      <input
        id="imgup"
        type="file"
        @change="up"
        accept="image/*"
        name="imgUrls"
        value="file1"
        :disabled="isReadonly"
        style="visibility: hidden"
      />
    </div>

    <label class="mdui-textfield-label">文章分类</label>
    <br />
    <select
      v-model="article_data.articleTypeId"
      :disabled="isReadonly"
      class="mdui-select"
    >
      <option v-for="item in cate_list" :value="item.id">{{
        item.name
      }}</option>
      <!-- <option value="1">旅游</option>
      <option value="2">文化</option>
      <option value="3">百家姓</option> -->
    </select>
    <br />
    <br />
    <label class="mdui-textfield-label">文章状态</label>
    <select
      v-model="article_data.state"
      :disabled="isReadonly"
      class="mdui-select"
    >
      <option value="1">启用</option>
      <option value="0">禁用</option>
    </select>
    <br />
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">展示权重(默认100)</label>
      <input
        class="mdui-textfield-input"
        type="text"
        :readonly="isReadonly"
        v-model="article_data.weight"
      />
    </div>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">文章内容</label>
      <br />
      <div v-if="isReadonly">
        <p v-html="article_data.details"></p>
      </div>
      <div id="wangeditor" v-else></div>
    </div>
    <br />
    <br />
    <button
      class="mdui-btn mdui-btn-dense mdui-color-red-accent mdui-ripple"
      v-on:click="add"
      v-if="!isReadonly"
    >
      添加
    </button>
    <div style="height: 100px"></div>
    <div class="mdui-dialog" id="commodity_edit_dialog" style="z-index:999999;">
      <div class="mdui-dialog-title">图片上传</div>
      <div class="mdui-dialog-content">
        {{ press }}
      </div>
    </div>
  </div>
</template>

<script>
import * as mdui from "mdui";
import axios from "axios";
import qs from "qs";
import E from "wangeditor";
const BASE_URL = "http://127.0.0.1:8886";
export default {
  name: "",
  data() {
    return {
      article_data: {
        id: "",
        title: "",
        articleTypeId: "5vqydfo3h5v3mxvcvea3kx51zf7u",
        cover: "",
        details: "",
        state: 1,
        weight: 100,
        remark: ""
      },
      mode: "add",
      wangeditor: undefined,
      press: "0%",
      image_url: "static/add2.jpg",
      cate_list: [],
      modeText: {
        add: "文章添加",
        edit: "文章编辑",
        view: "文章查看"
      }
    };
  },
  created() {
    this.get_cate_list();
    this.mode = this.$route.params.mode || "add";
    console.log(this.mode);
    if (this.mode !== "add") {
      this.article_data.id = this.$route.params.article_id;
      this.get_article_by_id();
    }
  },
  computed: {
    isReadonly() {
      return this.mode === "view";
    }
  },
  mounted() {
    this.inst = new mdui.default.Dialog("#commodity_edit_dialog");
    if (!this.isReadonly) {
      this.wangeditor = new E("#wangeditor");
      this.wangeditor.config.height = 500;
      this.wangeditor.create();
    }
  },
  methods: {
    get_article_by_id() {
      axios({
        method: "GET",
        url: BASE_URL + "/article/getArticleByPage",
        params: {
          articleId: this.article_data.id,
          page: 1,
          pageSize: 1
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(re => {
        const {
          data: { data: result }
        } = re;
        this.article_data = result[0];
        this.image_url = this.get_image(this.article_data.cover);
        if (this.wangeditor) {
          this.wangeditor.txt.html(this.article_data.details);
        }
      });
    },
    get_cate_list() {
      this.token = window.localStorage.getItem("token");
      axios({
        method: "GET",
        url: BASE_URL + "/article/getAtricleTypeList",
        params: {
          token: this.token
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
        .then(re => {
          const {
            data: { data: result }
          } = re;
          this.cate_list = result;
        })
        .catch(rej => {
          console.log(rej);
        });
    },

    get_image(id) {
      return BASE_URL + "/images/small/" + id + ".jpg";
    },

    up(i) {
      this.inst.open();
      let file = i.path[0].files[0];
      let ff = new FormData();
      ff.append("uploadedfile", file);
      this.token = window.localStorage.getItem("token");
      this.press = "0%";
      axios
        .post(BASE_URL + "/images/up", ff, {
          headers: { "Content-Type": "multipart/form-data" },
          onUploadProgress: progressEvent => {
            this.press =
              (((progressEvent.loaded / progressEvent.total) * 100) | 0) + "%";
            if (
              (((progressEvent.loaded / progressEvent.total) * 100) | 0) ==
              100
            )
              this.image_url = "static/loading.jpg";
          }
        })
        .then(re => {
          this.inst.close();
          this.image_url = re.data.small;
          this.article_data.cover = re.data.id;
          console.log(this.cover);
        })
        .catch(err => {
          this.inst.close();
          mdui.default.alert("网络错误");
        });
    },
    checkform() {
      if (!this.article_data.title) {
        mdui.default.alert("请输入标题");
        return false;
      }
      if (!this.article_data.articleTypeId) {
        mdui.default.alert("请选择分类");
        return false;
      }
      if (!this.article_data.cover) {
        mdui.default.alert("请上传封面图");
        return false;
      }
      if (!this.article_data.details) {
        mdui.default.alert("请输入文章内容");
        return false;
      }
      return true;
    },
    add() {
      this.article_data.details = this.wangeditor.txt.html();
      this.article_data.remark = this.wangeditor.txt.text().substring(0, 700);
      this.token = window.localStorage.getItem("token");
      if (!this.checkform()) return;
      const diffDispatch = {
        add: () => {
          this.article_data.id = undefined;
          axios({
            method: "POST",
            url: BASE_URL + "/article/addArticle",
            params: {
              token: this.token
            },
            data: this.article_data
          })
            .then(res => {
              this.$router.replace("/article_list");
            })
            .catch(err => {
              mdui.default.alert("网络错误");
            });
        },
        edit: () => {
          console.log(this.article_data);
          axios({
            method: "POST",
            url: BASE_URL + "/article/updateArticle",
            params: {
              token: this.token
            },
            data: this.article_data
          })
            .then(re => {
              this.$router.replace("/article_list");
            })
            .catch(rj => {
              mdui.default.alert("网络错误");
            });
        }
      };
      diffDispatch[this.mode]();
    }
  }
};
</script>

<style>
/* .w-e-toolbar {
  z-index: 99 !important;
}
.w-e-text-container {
  z-index: 100 !important;
} */
.mdui-dialog {
  z-index: 99999999;
}
.mdui-overlay {
  z-index: 99999998 !important;
}
</style>
